import { Form, Input, Button, message } from "antd";
import { MobileOutlined, LockOutlined } from "@ant-design/icons";
import { useState } from "react";
import { getSmsCode, resetPassword } from "@/api/services/loginService";

interface ForgotPasswordFormProps {
	onSwitch: () => void;
}

const ForgotPasswordForm: React.FC<ForgotPasswordFormProps> = ({
	onSwitch,
}) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);
	const [countdown, setCountdown] = useState(0);

	const startCountdown = () => {
		setCountdown(60);
		const timer = setInterval(() => {
			setCountdown((prev) => {
				if (prev <= 1) {
					clearInterval(timer);
					return 0;
				}
				return prev - 1;
			});
		}, 1000);
	};

	const handleSendCode = async () => {
		const mobile = form.getFieldValue("mobile");
		if (!mobile) {
			message.error("请输入手机号");
			return;
		}
		await getSmsCode(mobile, "resetpwd");
		message.success("验证码已发送");
		startCountdown();
	};

	const onFinish = async (values: {
		mobile: string;
		code: string;
		password: string;
		confirmPassword: string;
	}) => {
		try {
			setLoading(true);
			if (values.password !== values.confirmPassword) {
				message.error("两次输入的密码不一致");
				return;
			}
			// TODO: 实现重置密码的API调用
			await resetPassword(values);
			console.log("重置密码:", values);
			message.success("密码重置成功");
			onSwitch();
		} catch (error) {
			console.error("重置密码失败:", error);
		} finally {
			setLoading(false);
		}
	};

	return (
		<Form
			form={form}
			name="forgot-password"
			onFinish={onFinish}
			autoComplete="off"
			size="large"
		>
			<Form.Item
				name="mobile"
				rules={[
					{
						required: true,
						message: "请输入手机号",
					},
					{
						pattern: /^1[3-9]\d{9}$/,
						message: "请输入正确的手机号",
					},
				]}
			>
				<Input
					prefix={<MobileOutlined />}
					placeholder="请输入手机号"
					maxLength={11}
				/>
			</Form.Item>

			<Form.Item>
				<div className="flex gap-2">
					<Form.Item
						name="code"
						noStyle
						rules={[
							{
								required: true,
								message: "请输入验证码",
							},
						]}
					>
						<Input placeholder="请输入验证码" maxLength={6} />
					</Form.Item>
					<Button
						type="primary"
						onClick={handleSendCode}
						disabled={countdown > 0}
					>
						{countdown > 0 ? `${countdown}秒后重试` : "获取验证码"}
					</Button>
				</div>
			</Form.Item>

			<Form.Item
				name="password"
				rules={[
					{
						required: true,
						message: "请输入新密码",
					},
				]}
			>
				<Input.Password prefix={<LockOutlined />} placeholder="请输入新密码" />
			</Form.Item>

			<Form.Item
				name="confirmPassword"
				rules={[
					{
						required: true,
						message: "请再次输入新密码",
					},
				]}
			>
				<Input.Password
					prefix={<LockOutlined />}
					placeholder="请再次输入新密码"
				/>
			</Form.Item>

			<Form.Item>
				<Button
					type="primary"
					htmlType="submit"
					className="w-full"
					loading={loading}
				>
					重置密码
				</Button>
			</Form.Item>

			<Form.Item>
				<Button type="link" className="w-full" onClick={onSwitch}>
					返回登录
				</Button>
			</Form.Item>
		</Form>
	);
};

export default ForgotPasswordForm;
